<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>任务列表 - {{ SYSTEM_NAME }}</title>
    <link rel="stylesheet" href="{{ LAYUI_PATH }}layui/css/layui.css" media="all">
    <link rel="stylesheet" href="{{ LAYUI_PATH }}style/admin.css" media="all">
</head>
<body>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">任务列表</div>
                <div class="layui-card-body">
                    <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                        <div class="layui-card layui-form" lay-filter="component-form-element">
                            <div class="layui-card-body layui-row layui-col-space10">
                                <div class="layui-col-md2">
                                    <select style="max-width:200px;" name="search_type" id="search_type" lay-verify="">
                                        <option value="">请选择搜索类型</option>
                                        <option value="uuid">UUID</option>
                                        <option value="title">标题</option>
                                        <option value="found">创建者</option>
                                        <option value="people">参与人</option>

                                    </select>
                                </div>
                                <div class="layui-col-md3">
                                    <input placeholder="请输入搜索条件" class="layui-input" name="id" id="search_text"
                                           autocomplete="off">
                                </div>
                                <div class="layui-col-md1">
                                    <button id="search" class="layui-btn" data-type="reload">搜索</button>
                                </div>
                                <div class="layui-col-md1">
                                    <button class="layui-btn" onclick="TaskHandle.onlymy();">查看我参与的任务</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table class="layui-hide" id="test-table-reload" lay-filter="task"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ LAYUI_PATH }}layui/layui.js"></script>
<script>
    String.prototype.format = function () {
        if (arguments.length === 0) return this;
        let result = this;
        if (arguments.length === 1 && typeof arguments[0] === 'object') {
            for (const key in arguments[0]) {
                if (arguments[0][key] === undefined) continue;
                result = result.replace(new RegExp("({" + key + "})", "g"), arguments[0][key]);
            }
        } else {
            for (let i = 0; i < arguments.length; i++) {
                if (arguments[i] === undefined) continue;
                result = result.replace(new RegExp("({[" + i + "]})", "g"), arguments[i]);
            }
        }
        return result.toString();
    }
    // 任务处理类
    class TaskHandle {
        // 浏览任务
        static ViewTask(uuid) {
            if (uuid.length < 1) {
                return layer.msg('无效的任务！', {icon: 2, shade: 0.3});
            } else {
                return layer.open({
                    type: 2,
                    area: ['70%', '85%'],
                    fixed: false,
                    maxmin: true,
                    title: '查看任务',
                    content: '/project/view/' + uuid
                });
            }
        }

        static EditTask(uuid) {
            return layer.msg('编辑任务:' + uuid)
        }

        static onlymy() {
            console.log('onclick');
        }
    }

    layui.config({
        base: '{{ LAYUI_PATH }}'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'table'], function () {
        if (self === top) {
            let layid = parent.layer.confirm('检测到你被重定向到了单独页面，是否回到主页面？', function () {
                window.location.href = '/';
                parent.layer.close(layid);
            })
        }
        const table = layui.table, element = layui.element, form = layui.form;
        form.render(null, 'component-form-element');
        element.render('breadcrumb', 'breadcrumb');
        table.render({
            elem: '#test-table-reload',
            url: '/project/list',
            height: 'full-162',
            cellMinWidth: 80,
            page: true,
            limit: 10,
            method: 'post',
            cols: [[
                {
                    field: 'id',
                    maxWidth: 10,
                    title: 'ID',
                    event: 'id',
                    sort: true,
                    fixed: 'left',
                    templet: function (item) {
                        return '<span title="{result}">{result}</span>'.replace('{result}', item.id).replace('{result}', item.id)
                    }
                },
                {
                    field: 'title', title: '标题', event: 'title', templet: function (item) {
                        return '<span title="{result}">{result}</span>'.replace('{result}', item.title).replace('{result}', item.title)
                    }
                },
                {
                    field: 'explain', title: '说明', event: 'explain', templet: function (item) {
                        return '<span title="{result}">{result}</span>'.replace('{result}', item.explain).replace('{result}', item.explain)
                    }
                },
                {
                    field: 'level', title: '级别', event: 'level', sort: true, templet: function (item) {
                        switch (item.level) {
                            case 1:
                                return '<span title="Lv1黄界" class="layui-badge layui-bg-blue">Lv1黄界</span>';
                            case 2:
                                return '<span title="Lv2玄界" class="layui-badge layui-bg-green">Lv2玄界</span>';
                            case 3:
                                return '<span title="Lv3地界" class="layui-badge layui-bg-orange">Lv3地界</span>';
                            case 4:
                                return '<span title="Lv4天界" class="layui-badge layui-bg-badge">Lv4天界</span>';
                            default:
                                return '<span title="未定义" class="layui-badge layui-bg-badge">未定义</span>';
                        }
                    }
                },
                {
                    field: 'status', title: '状态', event: 'status', sort: true, templet: function (item) {
                        let style = {
                            1:{
                                title:'进行中',
                                html:'layui-badge layui-bg-green'
                            },
                            2:{
                                title:'已暂停',
                                html:'layui-badge layui-bg-orange'
                            },
                            3:{
                                title:'已停止',
                                html:'layui-badge layui-bg-badge'
                            },
                            4:{
                                title:'已结束',
                                html:'layui-badge layui-bg-badge'
                            },
                            5:{
                                title:'已超时',
                                html:'layui-badge layui-bg-badge'
                            }
                        }
                        return '<span title="{title}" class="{html}">{title}</span>'.format({
                            title: style[item.status].title,
                            html: style[item.status].html
                        })
                    }
                },
                {
                    field: 'found', maxWidth: 20, event: 'found', title: '创建者/参与', sort: true, templet: function (item) {
                        let lab1 = '<span title="{found}" class="layui-badge-rim">{found}</span>'.replace('{found}', item.found).replace('{found}', item.found);
                        let lab2 = item.people.indexOf('{{ name }}') !== -1 ? '<span title="{{ name }}" class="layui-badge layui-bg-blue">我</span>'.replace('{found}', item.found).replace('{found}', item.found):'';
                        return lab1 + '&nbsp;&nbsp;&nbsp;' + lab2;
                    }
                },
                {
                    field: 'starttime',minWidth:160, title: '开始时间', event: 'starttime', sort: true, templet: function (item) {
                        let time = item.starttime < 1 ? '1970-01-01 08:00:00' : new Date(parseInt(item.starttime) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
                        return '<span title="{time}">{time}</span>'.format({time: time});
                    }
                },
                {
                    field: 'edit',
                    minWidth: 100,
                    title: '在线文档',
                    fixed: 'right',
                    templet: function (item) {
                        let Person = ['<div class="layui-btn-container">', '</div>'];
                        {#let viewDom = '<button onclick="TaskHandle.ViewTask(' + item.uuid + ');" class="layui-btn layui-btn-xs layui-btn-normal">查看</button>';#}
                        let editDom = {{ isadmin }} ? '<button onclick="TaskHandle.EditTask(' + item.uuid + ');" class="layui-btn layui-btn-xs layui-btn-normal">编辑</button>' : null;
                        let onlineWordDom = '<button onclick="layer.msg(\'兄弟，能瞄准点吗~\');" class="layui-btn layui-btn-xs layui-btn-normal"><a style="color: cornsilk;" target="_blank" href="/project/go/' + item.uuid + '">在线文档</a></button>';
                        if (item.onlineword.length < 1) {
                            onlineWordDom = '<button onclick="layer.msg(\'该任务没有在线文档！\',{icon:2,shade:0.3})" class="layui-btn layui-btn-xs layui-btn-danger">无文档</button>';
                        }
                        return Person[0] + editDom + onlineWordDom + Person[1];
                    }
                }
            ]]
        });
        table.on('tool(task)', function (obj) {
            const data = obj.data;
            console.log(obj.event);
            if (obj.event !== 'edit') {
                TaskHandle.ViewTask(obj.data.uuid);
            }

            //标注选中样式
            {#obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');#}
        });
        const $ = layui.$, active = {
            reload: function () {
                let search_text = $('#search_text');
                let search_type = $('#search_type');
                console.log(search_type.val());
                //执行重载
                table.reload('test-table-reload', {
                    page: {
                        curr: 1
                    },
                    where: {
                        search_text: search_text.val(),
                        search_type: search_type.val()
                    }
                });
            }
        };

        $('#search').on('click', function () {
            if (!$('#search_type').val()) {
                return layer.msg('请选择搜索类型~', {icon: 5, shade: 0.3, time: 1800});
            } else if (!$('#search_text').val()) {
                return layer.msg('搜索类型都选了，查询条件怎么能空着呢。', {icon: 6, shade: 0.3, time: 1800});
            }
            const type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
</body>
</html>